<template>
  <div>
    <div class="top">
        <span>我的</span>
    </div>
    <div>
        <div class="main">
        <img src="https://axhub.im/pro/221031c5a692ef70/images/我的/u32.png" alt="">
        <span>爱笑的娃娃</span>
    </div>
    <div class="my_order my" @click="my_order">
        <span>我的订单</span>
        <span><img src="https://axhub.im/pro/221031c5a692ef70/images/我的/u37.png" alt=""></span>
    </div>
    <div class="my_appoint my" @click="my_appoint">
        <span>我的预约</span>
        <span><img src="https://axhub.im/pro/221031c5a692ef70/images/我的/u37.png" alt=""></span>
    </div>
    <div class="my_coupon my" @click="my_coupon">
        <span>我的优惠劵</span>
        <span><img src="https://axhub.im/pro/221031c5a692ef70/images/我的/u37.png" alt=""></span>
    </div>
    </div>
     <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../../components/Footer';
export default {
    components: {
    Footer,
  },
  data() {
    return {};
  },
  methods: {
    my_order() {
      this.$router.push("/order");
    },
    my_appoint(){
        this.$router.push("/appointment");
    },
    my_coupon(){
        this.$router.push("/coupon");
    }
  },
};
</script>

<style scoped>
    body,p,ul,h1,h2,h3,h4,h5,h6,input{
	    margin: 0;
	    padding: 0;
    }
    img{
	    vertical-align: middle;
    }
    .top{
        text-align: center;
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    .main{
        width: 100%;
        height: 228px;
        background-color: rgba(70, 76, 91, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .main img{
        width: 72px;
        height: 72px;
    }
    .main span{
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        color: #FFFFFF;
        font-size: 18px;
        margin-top:16px ;
    }
    .my img{
        width: 25px;
        height: 25px;
    }
    .my_order{
        margin-top: 40px;
        border-top: 1px solid rgba(242, 242, 242, 1);
    }
    .my{
        widows: 100%;
        height: 50px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>